<template>
<div class="wallet-recharge-create">
	<Row>
		<Col :span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu(0)"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem :to="{'name':'wallet-recharge-index'}">充值管理</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner20"></div>
		</Col>
	</Row>
	<Form ref="vform" :model="vform" :label-width="100" :rules="ruleValidate">
		<Row type="flex" :gutter="16">
			<Col :span=8>
				<Row type="flex">
					<Col :span="24">
						<FormItem ref="realname" label="用户名称" prop="realname">
							<Input v-model="vform.realname" placeholder="请填写用户名称" readonly>
								<Icon type="md-search" slot="suffix" @click.native="onSelectUser"></Icon>
							</Input>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="状态" prop="status">
							<span :class="0==vform.status?'draft':1==vform.status?'success':'warning'">{{statusNames[vform.status]}}</span>

						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="充值方式" >
							<i-switch v-model="vform.type_id" size="large" :true-value="1" :false-value="0">
								<span slot="open">线上</span>
								<span slot="close">线下</span>
							</i-switch>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="充值金额" prop="money">
							<InputNumber :max="99999" :min="0" :step="0.01" v-model="vform.money"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="手续费" prop="fee">
							<InputNumber :max="99999" :min="0" :step="0.01" v-model="vform.fee"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="支付渠道" prop="payment_id">
							<Select v-model="vform.payment_id" >
								<Option v-for="(item,index) in paymentList" :value="item.value" :key="index">{{ item.label }}</Option>
							</Select>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="备注">
							<Input v-model="vform.memo" placeholder="请填写备注"></Input>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="">
							<Button type="primary" @click="onSave">保存</Button>
							<Button type="success" v-if="0==vform.status||2==vform.status" @click="changeStatus($route.params.id,1)">提现成功</Button>
							<Button type="warning" v-if="1==vform.status" @click="changeStatus($route.params.id,2)">提现失败</Button>
							<Button type="error" @click="onRowDelete($route.params.id,3)">删除</Button>
						</FormItem>
					</Col>
				</Row>
			</Col>
			<Col :span=6>
				<Alert type="warning" show-icon>
					温馨提示
					<span slot="desc">
						此界面只用于修改信息，不执行任何业务逻辑。 <Icon type="help-circled" size="14"></Icon>
					</span>
				</Alert>
			</Col>
	
		</Row>
	</Form>

	<Listener-Selector  :show.sync="showBox" @on-hide="showBox=false" @on-change="onListenerChange"></Listener-Selector>
	

</div>
</template>
<script>
// 引入子组件
import ListenerSelector from '@/components/ListenerSelector/ListenerSelector.vue'
import {mapState,mapGetters} from 'vuex'
import { Alert, Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button,  Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber } from 'iview';
export default { 
	name:'wallet-recharge-create',
	components: { Alert, Tag, Card, Page, Modal, ListenerSelector, Spin, Row, Col, ButtonGroup, Button, Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber},
	data () {
		return {
			title:'编辑',
			showBox:false,
			spinShow:false,
			listenerObj:{},
			
			ruleValidate: {
				realname: [
					{ required: true, message: '请选择倾听者', trigger: 'blur' },
				],
				status: [
					{ required: true, message: '请选择状态', trigger: 'change', type:'number' }
				],
				fee: [
					{ required: true, message: '请填写手续费', trigger: 'change', type:'number' }
				],
				money: [
					{ required: true, message: '请填写充值金额', trigger: 'change', type:'number' }
				],
				payment_id: [
					{ required: true, message: '请选择充值渠道', trigger: 'change',}
				],
				
			},
			vform:{
				realname:'',
				status:1,
				type_id:0,
				money:0,
				fee:0,
				payment_id:"0",
				payment_name:'',
				uid:null,
				memo:''
			},
			statusNames:['待支付','已到账','充值失败'],
			statusList: [
				{value: 0,label: '待支付'},
				{value: 1,label: '已到账'},
				{value: 2,label: '充值失败'},
			],
			paymentList: [{value: "0",label:'人工充值'}],
			
			
		}
	},
	methods:{
		init:function(){
			let self=this
			self.$store.dispatch("setSpinShow",true)

			function action1(){return self.$http.get("/v1/wallet/recharge/payments",{params: { 'token': self.token }})}
			function action2(){return self.$http.get("/v1/wallet/recharges/"+self.$route.params.id,{params: { 'token': self.token }})}
			
			self.$http.all([action1(),action2()])
			.then(self.$http.spread(function (response1,response2){
				if(200==response1.data.status && 0==response1.data.code){
					response1.data.data.forEach(item=>{
						self.paymentList.push({value: item.id,label: item.name})
					})
				}else{self.$Message.error(response1.data.message)}
				if(200==response2.data.status && 0==response2.data.code){
					response2.data.data.type_id=parseInt(response2.data.data.type_id)
					response2.data.data.status=parseInt(response2.data.data.status)
					response2.data.data.money=parseFloat(response2.data.data.money)
					response2.data.data.fee=parseFloat(response2.data.data.fee)
					self.vform=response2.data.data
				}else{self.$Message.error(response2.data.message)}
				
				self.$store.dispatch("setSpinShow",false)
			})).catch(self.$http.spread(function (error1,error2) {
				self.$store.dispatch("setSpinShow",false)
			}))
		},
		onRowDelete(id,statusId){
			this.$Modal.confirm({
				title: '温馨提示',
				content: '删除后不可恢复，确认删除？',
				onOk: () => {
					this.changeStatus(id,statusId)
				},
			})
		},
		changeStatus:function(uid,statusId){
			let self=this
			
			self.$http.post("/v1/wallet/recharges?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				
				if(200==response.data.status && 0==response.data.code)
				{
					if(3==statusId){self.$router.push({path:'/wallet/recharge/index'})}
					self.vform.status=statusId
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				
			})
		},
		onSave:function(index){
			let self=this
			let _flag=true
			this.$refs.vform.validate((valid) => {
				if (!valid){
					this.$Message.error('请完成必填项')
					_flag=false
				}
			})
			if(!_flag){return}
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/wallet/recharges?_method=put&token="+self.token,{'id':self.$route.params.id,'data':JSON.stringify(self.vform)})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.$Message.success('操作成功')
					self.$router.push({path:'/wallet/recharge/edit/'+response.data.data.id})
				}else{
					self.$Message.error(response.data.message)
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error(error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
		onSelectUser:function(){
			this.showBox=true
		},
		onListenerChange:function(obj){
			this.listenerObj=obj
			this.vform.uid=this.listenerObj.uid
			this.vform.realname=this.listenerObj.realname
		},
	},
	created:function(){
	},
	mounted () {
    	this.setTitle(this.title)
	},
	activated:function(){
		this.init()
	},
	computed:{
		...mapGetters(['token','menuIndex'])
	},
}



</script>
<style lang="less" scoped>
</style>